<script setup lang="ts">
import { inject, ref } from 'vue'
import axios from 'axios'
import { useActiveOp } from '@renderer/views/imgViewer/hooks/useActiveOp'
const {
  baseUri,
  throughGatewayFlag
} = inject('pyImgHandlerIo') as any
const {
  setActiveOp
} = useActiveOp()
const performanceModeRef = ref('')
const performanceButtons = ref([
  {
    label: 'MTF',
    value: 'mtf',
    icon: 'markRaw(Ruler)'
  }
])
const handleMTF = async (val) => {
  if (performanceModeRef.value === val) {
    performanceModeRef.value = ''
    setActiveOp({
      type: '',
      subType: ''
    })
  } else {
    performanceModeRef.value = val
    setActiveOp({
      type: 'performance',
      subType: 'rectangle'
    })
  }

  const prefix = throughGatewayFlag ? `${baseUri}/image/` : `${baseUri}/`
  const msg = {
    performance: performanceModeRef.value
  }
  await axios.post(`${prefix}performance`, msg)
}
</script>

<template>
  <div class="mb-[10px]">
    <template v-for="btn in performanceButtons">
      <el-button
        class="w-full !ml-0"
        :type="performanceModeRef ? 'primary':''"
        @click="handleMTF(btn.value)"
      >{{ btn.label }}
      </el-button>
    </template>
  </div>
</template>

<style scoped>

</style>
